<template>
  <div v-loading="loading" class="ProcessInfo">
    <el-row class="dolist">
      <el-col :span="24" style="border-left: 1px solid #DCDFE6;">
        <div class="tabTask">
          <ul>
            <li :class="[{active: cur === 0}]" @click="active(0)">{{ $t('流程申请单') }}</li>
            <li v-for="(item, index) in taskData.businessPathArray" :key="index" :class="{active:cur===2}" @click="importBusinessPath(2,item)">
              {{ $t(item.name) }}
            </li>
            <li v-if="actApprovalPng !== 'false'" :class="[{active: cur === 1}]" @click="active(1)">{{ $t('流程图') }}</li>
          </ul>
        </div>
        <div v-show="cur === 0" class="actTaskLeft actTaskForm">
          <div style="">
            <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
            <component :is="actFormPath" ref="actFormPath" />
          </div>
          <!--流转记录-->
          <div v-if="actApprovalRecord !== 'false'">
            <approval-record :act-id="taskData.actId" />
          </div>
        </div>
        <div v-if="cur === 1" class="actTaskLeft">
          <!--流程图-->
          <act-flow-chart :act-id="taskData.actId" />
        </div>
        <div v-show="cur === 2" class="actTaskLeft" :style="{'height':windowHeight}">
          <div style="margin: 0px -20px 20px 0;">
            <!--动态组件 ，根据is的值来确定渲染哪个组件 -->
            <component :is="businessPath" ref="businessPath" />
          </div>
        </div>
        <div id="print" ref="print" class="actTaskLeft" style="display:none;">
          <div>
            <component :is="printPath" ref="printPath" />
          </div>
          <div>
            <approval-record :act-id="taskData.actId" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-button size="small" type="primary" class="printBtn" @click="doPrint">{{ $t('打印') }}</el-button>
  </div>
</template>

<script>
import { getAsyncComponent } from '@/utils'
import { getProcessInfo } from '@/api/act/process/actProcess'
import approvalRecord from '@/components/Act/ApprovalRecord'
import ActFlowChart from '@/views/act/process/actFlowChart'
import Vue from 'vue'

export default {
  name: 'ProcessInfoForm',
  components: {
    ActFlowChart,
    approvalRecord
  },
  data() {
    return {
      windowHeight: document.documentElement.clientHeight - 100 + 'px',
      // list页面传过来的数据
      taskData: {},
      cur: 0,
      actApprovalRecord: true,
      actApprovalPng: true,
      // 待办页面组件
      actFormPath: '',
      // 业务表单组件
      businessPath: '',
      form: [],
      statusOptions: [],
      // 遮罩层
      loading: false,
      clicked: false,
      clickClass: '',
      printPath: ''
    }
  },
  mounted: function() {
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight - 120 + 'px'
        this.diyHeight = document.documentElement.clientHeight - 140 + 'px'
      })()
    }
    this.$nextTick(function() {
      this.windowHeight = document.documentElement.clientHeight - 120 + 'px'
      this.diyHeight = document.documentElement.clientHeight - 140 + 'px'
    })

    this.loadComponent()
    // 错误捕获
    const errorHandler = (error) => {
      if (error) {
        if (error.message.indexOf('Cannot find module') > -1) {
          this.printPath = this.actFormPath
        }
      }
    }
    Vue.config.errorHandler = errorHandler
    Vue.prototype.$throw = (error) => errorHandler(error, this)
  },
  destroyed() {
    this.$store.dispatch('formBtn/toggleForcedBtnHide', false)
  },
  methods: {
    active(index) {
      this.cur = index
    },
    doPrint() {
      this.$print(this.$refs.print)
    },
    // 初始化数据
    init(data) {
      this.cur = 0
      console.log('datainit', data)
      this.loading = true
      this.taskData = data
      this.actApprovalPng = data.actApprovalPng
      this.actApprovalRecord = data.actApprovalRecord
      // 获取当前待办信息
      getProcessInfo(data.actId).then(response => {
        console.log(response, 'getProcessInfogetProcessInfogetProcessInfogetProcessInfo')
        this.$nextTick(function() {
          this.taskData = response.data
          this.taskData.actId = data.actId
          var formData = {}
          formData.id = this.taskData.dataId
          formData.formId = this.taskData.formId
          this.importActFormPath(response.data.formPath, formData)
          this.loading = false
        })
      })
    },
    // 引入流程申请单组件
    importActFormPath(actFormPath, data) {
      this.actFormPath = getAsyncComponent(actFormPath)
      // 打印地址
      var actViewPath = actFormPath.replace(/(.*)Form/, '$1View')
      this.printPath = getAsyncComponent(actViewPath)
      this.actFormData = data
    },
    // 引入业务组件
    importBusinessPath(v, importBusinessData) {
      this.cur = v
      this.businessPath = getAsyncComponent(importBusinessData.path)
      this.$bus.$once('async_done', () => {
        console.log('执行一次')
        this.$nextTick(() => {
          this.$refs.businessPath && this.$refs.businessPath.init(importBusinessData.initData)

          // 控制按钮是否隐藏
          if (this.$refs.businessPath?._data !== undefined) {
            this.$refs.businessPath._data.btnHide = true
          }
          // 隐藏保存按钮外的其它按钮
          if (this.taskData.actModifyFrom === 'false' && this.$refs.businessPath?._data !== undefined) {
            this.$refs.businessPath._data.otherBtnHide = true
          }
        })
      })
    },
    // 加载组件
    loadComponent() {
      this.$bus.$on('async_done', () => {
        this.$nextTick(() => {
          this.$refs.actFormPath && this.$refs.actFormPath.init(this.actFormData)
          this.$refs.printPath && this.$refs.printPath.init(this.actFormData)
          this.$refs?.actFormPath?.$refs?.formBtn && this.$store.dispatch('formBtn/toggleForcedBtnHide', true)
          if (this.$refs?.actFormPath !== undefined) {
            this.$refs.actFormPath._data.otherBtnHide = true
          }
          if (this.$refs?.printPath !== undefined) {
            this.$refs.printPath._data.otherBtnHide = true
          }
          // 控制按钮是否隐藏
          if (this.$refs.actFormPath?._data !== undefined) {
            this.$refs.actFormPath._data.btnHide = true
          }
          // 隐藏保存按钮外的其它按钮
          if (this.taskData.actModifyFrom === 'false' && this.$refs.actFormPath?._data !== undefined) {
            this.$refs.actFormPath._data.otherBtnHide = true
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-form{
  position: unset!important;
}
.actTaskLeft{
  overflow: auto;
  padding-left: 20px;
  // margin-right: -20px;
  padding-top: 20px;
}
.dataForm .el-row{
  overflow: auto;
}
.tabTask{
    height: 35px;
    border-bottom: 1px solid #DCDFE6;
    /* border-left: 1px solid #DCDFE6; */
}
.tabTask li{
    background: #fff;
    border: 1px solid #DCDFE6;
    color: #606266;
    height: 35px;
    padding: 8px;
    cursor: pointer;
    float: left;
    text-align: center;
    border-left: 0;
}
.tabTask li.active{
    border-top: 3px solid #46a6ff;
    border-bottom: 0;
    color: #606266;

}
.actTaskLeft{
  height: calc(100% - 35px);
  border: 1px solid #DCDFE6;
  border-top: 0;
}
.actTaskForm{
  .printForm {
    width:calc(100% - 30px);
  }
  /deep/.area-header{
    margin: 10px 0;
  }
  /deep/.approvalRecord {
    width:calc(100% - 30px);
    margin-bottom: 10px;
  }
}

/deep/.actTaskForm{
  .dialog-footer{
    display: none;
  }
}

</style>
